<template>
  <div class="index_wrap">
    <div style="height:300px;" class="mb10 mt10">
      <img style="height:300px;width:100%;object-fit: cover;" src="@/assets/images/dashboard.jpg"/>
    </div>
    <div class="flex flex_h_between" style="width:1200px;margin:0 auto;">
      <!-- 活动 -->
      <a-card style="width: 590px;min-height:386px">
        <div class="card_title_wrap">
          <div class="card_title">精彩活动</div>
          <div class="card_title_more" @click="toMore('activity')"><span>更多&nbsp;</span><a-icon type="double-right" /></div>
        </div>
        <div class="flex card_item flex_h_between px20 flex_v_center mb10" v-for="item in activitys" :key="item.id" @click="toDetail('activity', item.id)">
          <a-icon type="appstore" class="mr_5"/>
          <div class="ellipsis">{{ item.title }}</div>
        </div>
      </a-card>
      <!-- 通知  -->
      <a-card style="width: 590px;min-height:386px">
        <div class="card_title_wrap">
          <div class="card_title">招募通知</div>
          <div class="card_title_more" @click="toMore('course')"><span>更多&nbsp;</span><a-icon type="double-right" /></div>
        </div>
        <div class="flex card_item flex_h_between px20 flex_v_center mb10" v-for="item in course" :key="item.id" @click="toDetail('course', item.id)">
          <a-icon type="appstore" class="mr_5"/>
          <div class="ellipsis">{{ item.name }}</div>
        </div>
      </a-card>
    </div>
    <!-- 精彩照片 -->
    <PhotoSwipe></PhotoSwipe>
    <div>
    </div>
  </div>
</template>

<script>
import PhotoSwipe from '@/components/PhotoSwipe/PhotoSwipe'
import { findAllActivity, findAllCourse } from '@/api/config'
export default {
  name: 'dashboard',
  components: {
    PhotoSwipe
  },
  data () {
    return {
      activitys: [],
      activitysTotal: 0,
      course: [],
      courseTotal: 0
    }
  },
  mounted () {
    this.getActivity()
    this.getCourse()
  },
  methods: {
    async getActivity () {
      let params = {
        status: 'PUBLISHED',
        pageSize: 10,
        pageNum: 1
      }
      let res = await findAllActivity(params)
      if (res.code === 200) {
        this.activitys = res.data.items
        this.activitysTotal = res.data.totalCount
      }
    },
    async getCourse () {
      let params = {
        // auditsStatus: this.auditsStatus === 'ALL' ? '' : this.auditsStatus,
        status: 'RECRUITING',
        operate: 'manage',
        pageSize: 10,
        pageNum: 1
      }
      let res = await findAllCourse(params)
      if (res.code === 200) {
        this.course = res.data.items
        this.courseTotal = res.data.totalCount
      }
    },
    toMore (type) {
      this.$router.push(`/front/more?type=${type}`)
    },
    toDetail (type, id) {
      this.$router.push(`/front/detail?type=${type}&id=${id}`)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../styles/var.styl'
.index_wrap ::v-deep .ant-card-body
  padding 0
.card_title_wrap
  background #f1f2f5
  margin 20px 0
  display flex
  justify-content space-between
  align-items center
  .card_title
    font-size 18px
    font-weight bold
    border-left 10px solid #0b6cb8
    padding 0 20px 0 10px
    background #fff
    display inline-block
  .card_title_more
    display flex
    align-items center
    cursor pointer
    font-size 12px
    color #999
    padding-right 15px
    &:hover
      color #1677cb
.card_item
  cursor pointer
  font-size 14px
  div
    width calc(100% - 30px)
  .anticon
    color:#999
.card_item:hover
  color #1677cb
.card_item:hover .anticon
  color #1677cb
// .dashboard-img
//   width: 100%
//   height 300px
//   background-image: url(../../../../assets/images/dashboard.jpg);
//   background-repeat:no-repeat;//背景图像将仅显示一次
//   background-attachment:scroll;
//   background-position:-50px 0px;//设置背景图片的的偏移量
//   background-size:100% 300px;////设置背景图片的大小
//   background-color:transparent;
</style>
